// 轮播图构造函数
function Carousel(tagBox) {
    // 目标类名
    this.tagBox = document.querySelector(tagBox);
    this.ul = this.tagBox.querySelector(".img_box>ul");
    // 按钮
    this.rightBtn = this.tagBox.querySelector(".arrow_right");
    this.leftBtn = this.tagBox.querySelector(".arrow_left");
    // 小圆点
    this.dots = this.tagBox.querySelectorAll(".dot_box>span");

  
    this.index = 1;
    // 保存上一步操作的index
    this.lastIndex = 1;
    // 初始化图片
    this.initImgs();
    // 开启左右点击事件
    this.eventListener();
    // 开启小圆点点击事件
    this.dotsEvent();
};

Carousel.prototype = {
    constructor: Carousel,
    // 初始化插入图片(第一张和最后一张)
    initImgs() {
        // 克隆最后一张, 到第一张
        this.ul.insertBefore(this.ul.lastElementChild.cloneNode(true), this.ul.firstElementChild);
        // 克隆第二张, 到最后一张
        this.ul.appendChild(this.ul.children[1].cloneNode(true));
        // 移动总体位置, 显示第一张
        this.ul.style.transform = `translateX(-${this.index}00%)`;
        // 加上过度动画
        this.ul.style.transition = ".2s ease-in-out";
    },
    // 左右点击事件
    eventListener() {
        // 存当前的this指向
        let _this = this;
        this.rightBtn.addEventListener("click", rightFn);
        this.leftBtn.addEventListener("click", leftFn);

        // 右边事件函数
        function rightFn() {
            console.log("右边");
            _this.index++;
            _this.ul.style.transform = `translateX(-${_this.index}00%)`;
            // 判断是否到达最后一张
            if (_this.index == _this.ul.children.length - 1) {
                // index下标恢复默认值
                _this.index = 1;
                // 最后一张图片过度效果完成之后触发
                // transitionend 监听过度动画结束
                _this.ul.addEventListener("transitionend", () => {
                    // console.log("动画结束");
                    // 取消过度效果
                    _this.ul.style.transition = "none";
                    _this.ul.style.transform = `translateX(-${_this.index}00%)`;
                    // 重新获取计算的最终样式
                    window.getComputedStyle(_this.ul).transitionDuration;
                    _this.ul.style.transition = ".2s ease-in-out";
                }, {
                    // 注册一次监听器
                    once: true
                })
            };

            // 改变小圆点颜色
            _this.dotsColor();

            // 保存上一个操作index值
            _this.lastIndex = _this.index;
        };

        // 左边事件函数
        function leftFn() {
            console.log("左边");
            _this.index--;
            _this.ul.style.transform = `translateX(-${_this.index}00%)`;
            // 判断是否到达第一张
            if (_this.index == 0) {
                // index下标设置到倒数第二张图片下标
                _this.index = _this.ul.children.length - 2;
                // 最后一张图片过度效果完成之后触发
                // transitionend 监听过度动画结束
                _this.ul.addEventListener("transitionend", () => {
                    // console.log("动画结束");
                    // 取消过度效果
                    _this.ul.style.transition = "none";
                    _this.ul.style.transform = `translateX(-${_this.index}00%)`;
                    // 重新获取计算的最终样式
                    window.getComputedStyle(_this.ul).transitionDuration;
                    _this.ul.style.transition = ".2s ease-in-out";
                }, {
                    // 注册一次监听器
                    once: true
                })
            };

            // 改变小圆点颜色
            _this.dotsColor();

            // 保存上一个操作index值
            _this.lastIndex = _this.index;
        };
    },
    // 小圆点颜色
    dotsColor() {
        // console.log("改变小圆点颜色");
        // console.log(this.index - 1);
        // console.log(this.lastIndex - 1, this.index - 1);
        // 删除上一个激活类
        this.dots[this.lastIndex - 1].classList.remove("dotActive");
        // 添加激活类
        this.dots[this.index - 1].classList.add("dotActive");
    },
    // 小圆点点击事件
    dotsEvent() {
        // this ----> Carousel
        this.dots.forEach(item => {
            item.addEventListener("click", () => {
                // 获取自定义属性data-index的值
                // let getIndex = item.dataset.index;
                let getIndex = item.getAttribute("data-index");
                // 重新赋值index
                this.index = getIndex;
                this.ul.style.transform = `translateX(-${getIndex}00%)`;
                // 小圆点颜色切换
                this.dotsColor();
                // 保存上一个操作值
                this.lastIndex = this.index;
            });
        })
    }
}


